<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const username = ref('');
const password = ref('');
const errorMessage = ref('');
const loading = ref(false);

// 模拟管理员登录
const handleLogin = async () => {
  // 简单的验证
  if (!username.value || !password.value) {
    errorMessage.value = '请输入用户名和密码';
    return;
  }

  loading.value = true;
  errorMessage.value = '';

  // 模拟登录请求
  try {
    // 这里应该是实际的API调用
    // 为了演示，我们使用简单的硬编码验证
    if (username.value === 'abc' && password.value === 'abc321') {
      // 存储管理员信息到本地存储
      localStorage.setItem('adminLoggedIn', 'true');
      localStorage.setItem('adminUsername', username.value);
      
      // 跳转到管理后台首页
      router.push('/admin');
    } else {
      errorMessage.value = '用户名或密码错误';
    }
  } catch (error) {
    errorMessage.value = '登录失败，请稍后再试';
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
      <div>
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
          旅游社交平台 - 管理员登录
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600">
          请输入您的管理员账号和密码
        </p>
      </div>
      
      <form class="mt-8 space-y-6" @submit.prevent="handleLogin">
        <div class="rounded-md -space-y-px">
          <div>
            <label for="username" class="sr-only">用户名</label>
            <input
              id="username"
              name="username"
              type="text"
              required
              v-model="username"
              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
              placeholder="用户名"
            >
          </div>
          <div>
            <label for="password" class="sr-only">密码</label>
            <input
              id="password"
              name="password"
              type="password"
              required
              v-model="password"
              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
              placeholder="密码"
            >
          </div>
        </div>

        <div>
          <button
            type="submit"
            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
            :disabled="loading"
          >
            <span v-if="loading" class="absolute left-0 inset-y-0 flex items-center pl-3">
              <i class="fa fa-circle-o-notch fa-spin"></i>
            </span>
            {{ loading ? '登录中...' : '登录' }}
          </button>
        </div>
        
        <div v-if="errorMessage" class="text-center text-red-600 text-sm">
          {{ errorMessage }}
        </div>
      </form>
    </div>
  </div>
</template>

<style scoped>
:root {
  --primary-color: #4f46e5;
}

.bg-primary {
  background-color: var(--primary-color);
}

.text-primary {
  color: var(--primary-color);
}

.border-primary {
  border-color: var(--primary-color);
}

.ring-primary {
  --ring-color: var(--primary-color);
}

.focus\:ring-primary:focus {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5);
}
</style>